<template>
  <!-- 人员发展列表 -->
  <div class="morning-personal-list">
    <div class="detail-info" v-for="item in list" :key="item.flag" @click="handleOpen(item)">
      <div class="item-img">
        <img class="item-img-user" src="~@/assets/imgs/publicline/board/icon-users.png" />
        <img v-if="item.DY_FLAG == '1'" class="item-img-party" src="~@/assets/imgs/publicline/board/icon-party.png" />
      </div>
      <div class="info-content">
        <div class="info-detail">
          <span class="info-name">{{ item.LOGIN_NAME }}</span>
          <span class="info-flag">{{ item.LOGIN_ID }}</span>
        </div>
        <div class="item-info">
          <div v-if="flag === 'evening'" class="info-desc">今日发展/今日目标</div>
          <div v-else>
            <!-- 维系、交付 展示当月值 -->
            <div v-if="isTarget()" class="info-desc">当日值/当月累计</div>
            <!-- 发展、智家 展示当月发展 -->
            <div v-else class="info-desc">当月累计/当月目标</div>
          </div>
          <!-- 夕会 -->
          <div class="item-value" v-if="flag === 'evening'">{{ item.KPI_VALUE || 0 }}/{{ item.MB_VALUE || 0 }}<span class="unit">户</span></div>
          <!-- 晨会 -->
          <div class="item-value" v-else-if="isTarget()">{{ item.KPI_VALUE || 0 }}/{{ item.TOTAL_VALUE || 0 }}<span class="unit">户</span></div>
          <div class="item-value" v-else>{{ item.TOTAL_VALUE || 0 }}/{{ item.MB_KPI_VALUE || 0 }}<span class="unit">户</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Array
    },
    dayId: {
      String
    },
    type: {
      String
    },
    flag: {
      String
    }
  },
  methods: {
    handleOpen(item) {
      if(this.flag === 'morning' && item.TOTAL_VALUE != 0) {
        this.$open.call(this, '/publicline/board/users',
          {
            dayId: this.dayId,
            type: this.type,
            id: item.LOGIN_ID
          }
        )
      }
      if(this.flag === 'evening' && item.KPI_VALUE != 0) {
        this.$open.call(this, '/publicline/board/eveninguser',
          {
            type: this.type,
            id: item.LOGIN_ID
          }
        )
      }
    },
    isTarget() {
      const merge = ['qz5g', 'sjb5g', 'kdtsb', 'kdxy', 'tcsd', 'yj', 'zj', 'xz', 'jf2i']
      return merge.includes(this.type)
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/person.less';

.morning-personal-list {
  .detail-info {
    .item-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .item-img {
      position: relative;
      .item-img-party {
        width: 20px;
        position: absolute;
        left: 24px;
        top: -4px;
      }
    }
    .info-content {
      margin-left: 16px;
    }
    .item-value {
      width: unset;
    }
  }
}
</style>